<template>
	<view>

		<view class="header">

			<text id='title'>抄表记录查询</text>
		</view>

		<view class="search">
			<input type="text" v-model="searchdata" placeholder="请输入水表号/单位名称" />
			<button @click="search">搜索</button>
		</view>

		<view class="date">
			<text>抄表月份</text>
			<view class="">
				<picker mode="date" fields='month' @change='timechange'>请选择{{time}}</picker>
			</view>

		</view>

		<view class="content" v-for="v in sbdata" @click="goWater(v)">
			<view>
				<view>水表号</view>
				<view>单位名称</view>
				<view>抄表月份</view>
				<view>抄表时间</view>
			</view>
			<view id="rightView">
				<view>{{v.sb_num}}</view>
				<view>{{v.qy_name}}</view>
				<view>{{v.cb_month}}</view>
				<view>{{v.cb_time}}</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		ref,
		toRefs,
		reactive,
		onMounted
	} from 'vue'
	import http from '../../utils/http.js'
	import{mapState,useStore} from 'vuex'
	export default {
		setup() {
			const{state,getters,commit,dispatch}=useStore();
			let data = reactive({
				sbdata: [

				],

				searchdata: '',
				time: '2022-04',

				timechange: (ev) => {
					console.log(ev)
					data.time = ev.detail.value
					data.searchTime()
				},

				search: () => {

					let v = data.searchdata; //搜索框搜索的内容
					let arry = data.sbdata; //所有的数据
					let searchData = []; //检索出来的数据


					if (!v) { //如果搜索框内容空时，触发这个函数，提示用户
						uni.showToast({
							title: '搜索框不能为空',
							icon: 'none'
						})
						return //直接退出该函数，后面代码不会被执行了
					};

					arry.forEach(item => {
						let id = String(item.sb_num);
						let danwei = String(item.qy_name);
						if (id.indexOf(v) != -1) { //检索id
							searchData.push(item);
						} else if (danwei.indexOf(v) != -1) {
							searchData.push(item);
						}
					})

					data.sbdata = searchData;
					data.searchdata = '' //清空搜索框

				},
				goWater: (v) => {
					console.log(v)
					commit('chaobiao/setrecordqueryInfo',v)
					uni.navigateTo({
						url: './Watermeterreading'
					})
					
				},
				getMeterReading() {
					http({
						url: '/miniwatermeter/getMeterReading',
						method: 'get',
					}).then((res) => {
						console.log(res)
						
						data.sbdata = res.data.data
						
					
					})
				},
				searchTime: () => { //点击时间按钮，触发的函数
					let searchTime = data.time; //点击时间按钮，接收到的
					let arry = data.sbdata; //所有的数据
					let searchData = []; //检索出来的数据
					console.log(searchTime)
					arry.forEach(item => {
						let time = String(item.cb_month);
						console.log(time)
						//这里是数据库里面抄表的时间。
						if (time.indexOf(searchTime) != -1) { //检索time
							searchData.push(item);
						}
					})
					console.log(searchData)
					if (searchData.length == 0) { //如果搜索出来的数组为空，表示没有该月份的数据，直接退出函数
						uni.showToast({
							title: '没有该月份的数据',
							icon: 'none'
						})
						return
					}
					return data.sbdata = searchData;
				}

			});
			onMounted(() => {
				data.getMeterReading()
			});
			return {
				...toRefs(data)
			}
		}
	}
</script>

<style scoped='less'>
	#rightView{
		text-align: left;
		
		
	}
	.header {
		display: flex;
		justify-content: flex-start;
		width: 100%;
		height: 100rpx;

		align-items: center
	}

	#titlef {
		color: #3C9CFF;
		margin-left: 30rpx;
	}

	#title {
		position: absolute;
		left: 255rpx;

	}

	.search {
		display: flex;
		justify-content: space-between;

	}

	.date {
		display: flex;
		justify-content: space-between;
		border: 1rpx solid black;
		height: 80rpx;
		align-items: center
	}
	

	input {
		border: 1rpx solid black;
		border-radius: 40rpx;
		height: 100rpx;
		width: 70%;
		text-align: center;
	}

	.content {
		border: 1rpx solid black;
		display: flex;
		justify-content: space-between;

	}
	
</style>
